<%@ page language="java" contentType="text/html; charset=utf-8"
    pageEncoding="utf-8"%>
<%@include file="/WEB-INF/jsp/base.jsp" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Insert title here</title>

	<link rel="shortcut icon" href="favicon.ico"> <link href="css/bootstrap.min.css?v=3.3.5" rel="stylesheet">
    <link href="css/font-awesome.min.css?v=4.4.0" rel="stylesheet">
    <!-- Data Tables -->
    <link href="css/plugins/dataTables/dataTables.bootstrap.css" rel="stylesheet">
    <link href="css/animate.min.css" rel="stylesheet">
    <link href="./css/plugins/sweetalert/sweetalert.css" rel="stylesheet">
    
    <link href="css/style.min.css?v=4.0.0" rel="stylesheet">
    <script src="./js/My97DatePicker/WdatePicker.js"></script>
    <script type="text/javascript" src="./js/img_upload.js"></script>
	<script type="text/javascript" src="./js/fileUploadUtil.js"></script>
  
    <script type="text/javascript"></script>
  	<script src="js/jquery.min.js?v=2.1.4"></script>
    <script src="js/bootstrap.min.js?v=3.3.5"></script>
    <script src="js/plugins/jeditable/jquery.jeditable.js"></script>
    <script src="js/plugins/dataTables/jquery.dataTables.js"></script>
    <script src="js/plugins/dataTables/dataTables.bootstrap.js"></script>
    <script src="./js/plugins/sweetalert/sweetalert.min.js"></script>
    <script src="js/content.min.js?v=1.0.0"></script>
    <script src="js/common.js"></script>
    <link rel="shortcut icon" href="favicon.ico"> <link href="css/bootstrap.min.css?v=3.3.5" rel="stylesheet">
    <link href="css/font-awesome.min.css?v=4.4.0" rel="stylesheet">
    <link href="css/plugins/jsTree/style.min.css" rel="stylesheet">
    <link href="css/animate.min.css" rel="stylesheet">
    <link href="css/style.min.css?v=4.0.0" rel="stylesheet"><base target="_blank">
    
      <style type="text/css">
    	.chanceTable{
    		border-collapse:separate; border-spacing:10px;
    	}
    	/* dataTables列内容居中 */  
		.table>tbody>tr>td{  
		    text-align:center;  
		}  
		/* dataTables表头居中 */  
		.table>thead:first-child>tr:first-child>th{  
		    text-align:center;  
		}  
    </style>
    
<script type="text/javascript">
function FormatDate (date) {
    return date.getFullYear()+"-"+(date.getMonth()+1)+"-"+date.getDate();
}

</script>
<script type="text/javascript">
var table;
var darw=0;
$(function () {
	
    //提示信息
    var lang = {
        "sProcessing": "<div style=\"float:right;width:50%\" >处理中...</div>",
        "sLengthMenu": "每页 _MENU_ 项",
        "sZeroRecords": "没有匹配结果",
        "sInfo": "当前显示第 _START_ 至 _END_ 项，共 _TOTAL_ 项。",
        "sInfoEmpty": "当前显示第 0 至 0 项，共 0 项",
        "sInfoFiltered": "(由 _MAX_ 项结果过滤)",
        "sInfoPostFix": "",
        "sSearch": "搜索:",
        "sUrl": "",
        "sEmptyTable": "表中数据为空",
        "sLoadingRecords": "载入中...",
        "sInfoThousands": ",",
        "oPaginate": {
            "sFirst": "首页",
            "sPrevious": "上页",
            "sNext": "下页",
            "sLast": "末页",
            "sJump": "跳转"
        },
        "oAria": {
            "sSortAscending": ": 以升序排列此列",
            "sSortDescending": ": 以降序排列此列"
        }
    };

    //初始化表格
    table = $("#chanceDataTable").dataTable({
    	
    	   "fnDrawCallback": function(){
    		   
    		var api = this.api();
    		var startIndex= api.context[0]._iDisplayStart;//获取到本页开始的条数
    		    api.column(0).nodes().each(function(cell, i) {
		cell.innerHTML = startIndex + i + 1;
			}); 
    		
    	}, 
        language:lang,  //提示信息
        autoWidth: false,  //禁用自动调整列宽
        stripeClasses: ["odd", "even"],  //为奇偶行加上样式，兼容不支持CSS伪类的场合
        processing: true,  //隐藏加载提示,自行处理
        
        serverSide: true,  //启用服务器端分页
        searching: false,  //禁用原生搜索
        orderMulti: false,  //启用多列排序
        order: [],  //取消默认排序查询,否则复选框一列会出现小箭头
        renderer: "bootstrap",  //渲染样式：Bootstrap和jquery-ui
        pagingType: "simple_numbers",  //分页样式：simple,simple_numbers,full,full_numbers
        "bLengthChange": false,
        ordering:false,     //关闭排序图标
       // bStateSave:true,  //刷新 停留在当前页
        ajax: function (data, callback, settings) {
            //封装请求参数
           
            var param = {};
            param.limit = data.length;//页面显示记录条数，在页面显示每页显示多少项的时候
            param.start = data.start;//开始的记录序号
            param.page = (data.start / data.length)+1;//当前页码
           // param.darw=darw;  //计数器
            
            var name=$("#serachChanceName").val().trim();
            if(name!=null && name!=""){
            	param.name=name;
            }   
            var jstreeHeight=$("#jstreeHeight").val().trim();
            if(jstreeHeight!=null && jstreeHeight!=""){
            	param.jstreeHeight=jstreeHeight;
            } 
            var jstreeId=$("#jstreeId").val().trim();
            if(jstreeId!=null && jstreeId!=""){
            	param.jstreeId=jstreeId;
            } 
            
            //ajax请求数据
            $.ajax({
                type: "POST",
                url: "queryEmployeeList.do",
                cache: false,  //禁用缓存
                data: param,  //传入组装的参数
                dataType: "json",
                success: function (result) {
                    	
                	//setTimeout仅为测试延迟效果
                    //封装返回数据    
                	var returnData = {};
					draw=result.draw;//后台返回的计数器
                    returnData.draw = data.draw;//这里直接自行返回了draw计数器,应该由后台返回
                    returnData.recordsTotal = result.total;//返回数据全部记录
                    returnData.recordsFiltered = result.total;//后台不实现过滤功能，每次查询均视作全部结果
                    returnData.data = result.data;//返回的数据列表
                    //调用DataTables提供的callback方法，代表数据已封装完成并传回DataTables进行渲染
                    //此时的数据需确保正确无误，异常判断应在执行此回调前自行处理完毕
                	if(result.permission == 1){
	    				swal("提示","你没有权限访问!","warning");
                	}
                    callback(returnData);
                },error:function(){
                	sweetAlert("异常", "网络出现异常!", "error");
                }
            });
        },
        //列表表头字段
        columns: [
        
			{"data":null}
			,  
			{"data":"employeeId","visible":false}
			,
            { "data": "name" }
			,
            { "data": "sex" }
            ,
            { "data": "position" }
            ,
            { "data": "phoneNumber" }
            ,
            { "data": "email" }
            ,
            { "data": function (data){
                if(data.address == null){
                	return "";
                }
            	else if(data.address.length >5){
            		return data.address.substr(0,5) + "......";
            	}else{
            		return data.address;
            	}
            		
            } }
           	
        ] ,
       columnDefs:[
                    {
                    	"targets":[8],   
                    	"data":"employeeId",     //数据列名
                    	"render":function(data,type,full){        //返回自定义的内容
                    		return "<a class=\"btn btn-info btn-xs\" data-toggle=\"modal\"  onclick=\"detail('"+data+"')\" > 详情<\a>"/* +
                    		"&nbsp;<a class=\"btn btn-primary  btn-xs\"   href=\"javascript:void(0);\" onclick=\"modifyModal('"+data+"')\">编辑<\a>&nbsp;"+
							"<a class=\"btn btn-danger  btn-xs\" href=\"javascript:void(0);\" onclick=\"deleteChance('"+data+"')\">删除<\a>"; */
                    	}
                    }
                 ]
    })//.api();
    //此处需调用api()方法,否则返回的是JQuery对象而不是DataTables的API对象
    
});
</script>
<style type="text/css">
#gaga {
	position: absolute;
	z-index: 9999;
	display: none;
}
</style>
<script type="text/javascript">
	window.onload = function() {
		var div = document.getElementById("gaga");
		div.style.position = "absolute";
		div.style.top = (document.documentElement.scrollTop + (document.documentElement.clientHeight - div.offsetHeight) / 2)
				+ "px";
		div.style.left = (document.documentElement.scrollLeft + (document.documentElement.clientWidth - div.offsetWidth) / 2)
				+ "px";
	};
</script>
</head>
<body class="gray-bg" style="height:100vh; overflow: hidden;">
	<div class="row" >
		<div  id="gaga">
			<img alt="" src="img\role-ajax-loader.gif">
		</div>
		<div id="deptListId"; class="col-sm-3" style="float:left; padding:0px  0px  0px   15px; positon: relative; display: none;">
            <div class="ibox float-e-margins">
                <div class="ibox-title" >
                    <h5>部门</h5>
                    <!-- <div class="ibox-tools"">
                        <a class="collapse-link">
                            <i class="fa fa-chevron-up"></i>
                        </a>
                        <a class="close-link">
                            <i class="fa fa-times"></i>
                        </a>
                    </div> -->
                </div>
                <div class="ibox-content" style="height:95vh; overflow: auto;">
                    <div id="using_json" ></div>
                </div>
            </div>
           
		</div>
            <div id="employeeListId"; class="col-sm-9" style="float:right;  display: none;  >
                <div class="ibox float-e-margins">
                    <div class="ibox-title" style="height:100vh; overflow: hidden;">
                        <h5>部门人员信息列表</h5>
                        
                    <div class="ibox-content">
						<div class="input-group col-md-3"
							style="margin-top: 0px; positon: relative; float: left; bottom: -5px;">
							<input id="serachChanceName" type="text" class="form-control "
								placeholder="请输入关键字（姓名）"/ > 
							<input id="jstreeHeight" style="display: none;" type="text"/ >
							<input id="jstreeId" style="display: none;" type="text"/ >
								<span
								class="input-group-btn">
								<button onclick="search()" class="btn btn-info btn-search">查询</button>
							</span>
						</div>
						<table   id="chanceDataTable"
                         class="table table-striped table-bordered table-hover dataTables-example" >
                            <thead>
                                <tr>
                               		<th>序号</th>
                               		<th>employeeId</th>
                                    <th>姓名</th>
                                    <th>性别</th>
                                    <th>职务</th>
                                    <th>手机号码</th>
                                    <th>邮箱</th>
                                    <th>地址</th>
                                    <th>操作</th>
                                </tr>
                            </thead>
                            
                        </table>
                    </div>
                </div>
            </div>
        </div>



	<!--详细信息的模态层  -->
	<div class="modal fade  " id='detailModal' >
		<div class="modal-dialog" style="width: 800px; height: 500px;">
			<div class="modal-content">
				<div class="modal-header">
					<button class="close" data-dismiss='modal'>×</button>
					<h2 class="modal-title" align="center">部门人员信息信息</h2>
				</div>

				<div class="modal-body" align="center">

					<form>

						<table id="modifyTable" class="chanceTable">
							<tr>
								<td align="right">姓名：</td>
								<td><span id="name" class="form-control"
									disabled="disabled"></span></td>
								<td align="right">性别：</td>
								<td><span id="sex" class="form-control" disabled="disabled"></span></td>
							</tr>
							<tr>
								<td align="right">职务：</td>
								<td><span id="position" class="form-control"
									disabled="disabled"></span></td>
								<td align="right">工作年限：</td>
								<td><span class="form-control" id="serviceYear"
									disabled="disabled"></span></td>
							</tr>
							<tr>
								<td align="right">身份证号码：</td>
								<td><span class="form-control" id="idCard"
									disabled="disabled"> </span></td>
								<td align="right">手机号码：</td>
								<td><span id="phoneNumber" class="form-control"
									disabled="disabled"></span></td>
							</tr>
							<tr>
								<td align="right">生日：</td>
								<td><span id="birthday" class="form-control"
									disabled="disabled"></span></td>
								<td align="right">在职情况：</td>
								<td><select disabled="disabled" class="form-control"
									name="workConditions" id="workConditions">
										<option value="">-请选择-</option>
										<option>在职</option>
										<option>请假</option>
										<option>休假</option>
								</select></td>
							</tr>
							<tr>
								<td align="right">邮箱：</td>
								<td width="250px"><span id="email"class="form-control"
									disabled="disabled"></span></td>
								<td  align="right">地址：</td>
								<td width="250px"><span class="form-control" id="address"
									disabled="disabled"></span></td>
							</tr>
						</table>
						<!-- 	<input type="hidden"  name="chanceId" id="mchanceId" > -->
					</form>

				</div>
				<div class="modal-footer" align="center">
					<div align="center">
						<button class="btn btn-primary" id="btnAddChance"
							onclick="closeModal(detailModal)">确认</button>
					</div>
				</div>
			</div>
		</div>
	</div>







	<script>

    //显示modal
   function showModal(modal){
	   $(modal).modal("show");
   }
    //隐藏modal
    function closeModal(modal){
    	 $(modal).modal("hide");
    }
    
   		
    		//查看员工详细信息
    		function detail(id){
    			$.ajax({
    	    		url:"modifyEmployeeQuery.do",
    	    		data:{"id":id},
    	    		dataType:"json",
    	    		type:"post",
    	    		success:function (result){
    	    			if(result.flag==1){
    	    				$("#name").text(result.employee.name);
    	    				$("#sex").text(result.employee.sex);
    	    				$("#position").text(result.employee.position);
    	    				$("#idCard").text(result.employee.idCard);
    	    				$("#phoneNumber").text(result.employee.phoneNumber);
    	    				$("#email").text(result.employee.email);
    	    				$("#address").text(result.employee.address);
    	    				
    	    				var serviceYear=new Date(result.employee.serviceYear);//时间戳转换为java.util.date
    	    				serviceYear=FormatDate(serviceYear);//抽取出来年月日
    	    				$("#serviceYear").text(serviceYear);
    	    				
    	    				var birthday=new Date(result.employee.birthday);//时间戳转换为java.util.date
    	    				birthday=FormatDate(birthday);//抽取出来年月日
    	    				$("#birthday").text(birthday);
    	    				
    	    				//遍历在职情况selec
    	    				var workConditionsValue;
    	    				if(result.employee.workConditions == 0){
    	    					workConditionsValue="在职";
    	    				}
    	    				else if (result.employee.workConditions == 1){
    	    					workConditionsValue="请假";
    	    				}
    	    				else if (result.employee.workConditions == 2){
    	    					workConditionsValue="休假";
    	    				}
    	    				
    	    				$("#workConditions option").each(function(){
    	    					if($(this).text()==workConditionsValue){
    	    						$(this).prop("selected","selected");
    	    						//break;
    	    					}
    	    				});
    	    		
    	    				$("#detailModal").modal("show");
    	    				
    	    			}else if(result.flag==0){
    	    				swal("异常","暂无数据,请稍后再试!","warning")
    	    			}
    	    		},error:function(){
    	    				swal("错误","系统异常,请稍后再试!","error")
    	    		}
    	    	});
    		}
    		//搜索
    		function search(){
		         table.fnDraw();
		         $("#gaga").css("display", "none");
    		}
    
    
    </script>
	<!-- jstree插件 -->
    <script src="js/plugins/jsTree/jstree.min.js"></script>
    
    <!-- 部门树初始化 -->
    <script>
		var a;
        $(document).ready(function(){
        	 $("#gaga").css("display", "block");
			$.ajax({
	    		url:"deptJsonQuery.do",
	    		type:"post",
	    		success:function (result){
	    			//将所有东西加载完后再显示
	    			$("#gaga").css("display", "none");
	    			$("#employeeListId").css("display", "block");
	    			$("#deptListId").css("display", "block");
	    			if(result.flag==1){
	    				$("#using_json").jstree({
	    					 "conditionalselect" : function (node, event) {
	    					     if(node.parents.length == 1){
	    					    	 $("#jstreeId").val("");
			    					 $("#jstreeHeight").val("");
	    							 table.fnDraw();
		    						 $("#gaga").css("display", "none");
    						     } else{
    						    	 $("#jstreeId").val(node.id);
 		    						 $("#jstreeHeight").val(node.parents.length);
 	    						 	 table.fnDraw();
 	    						 	 $("#gaga").css("display", "none");
    						     }
	    						 
	    						 /* if(node.children_d.length == 0){
		    					 	$("#jstreeId").val(node.id);
		    						$("#jstreeHeight").val(node.parents.length);
	    						 	table.fnDraw();
	    						 	$("#gaga").css("display", "none");
	    						 } */
	    						 return true;
	    						 },
	    						 "plugins" : [ "conditionalselect" ],
	    						 "core":result.returnMap.core
	    				})
	    				
	    			}else if(result.flag==0){
	    				swal("异常","暂无数据,请稍后再试!","warning")
	    			}
	    		},error:function(){
	    				swal("错误","系统异常,请稍后再试!","error")
	    		}
	    	});
        });
     
    </script>
     <script type="text/javascript" src="http://tajs.qq.com/stats?sId=9051096" charset="UTF-8"></script>
</body>
</html>